<template>
	<view class="video-message">
		<!-- 视频描述文本 -->
		<view class="image-desc" >
			<text class="image-text">{{ msg.content.text || '没有说明' }}</text>
		</view>

		<!-- 视频容器 -->
		<view class="video-container">
			<!-- 视频标签（恢复并修复） -->
			<view class="message-video" >
				<image :src="thumbnail" mode="aspectFill"></image>
			</view>
	
			<!-- 视频封面覆盖层（未播放时显示） -->
			<view class="video-overlay" v-if="!isPlaying">
				<view class="video-info">
					<text class="video-title">{{ title }}</text>
					<text class="video-duration">{{ formatDuration(msg.content.duration) }}</text>
				</view>
				<!-- 播放按钮（增强用户点击感知） -->
				<view class="play-btn" @touchend.prevent="toplay">
					<image class="play-btn-img" src="/static/play.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import playVideo from '../../utils/playVideo';
export default {
	props: {
		msg: {
			type: Object,
			required: true
		},
		videoUrl: {
			type: String,
			required: true
		},
		thumbnail: {
			type: String,
			required: true
		},
		title: {
			type: String,
			default: '视频消息'
		}
	},
	data() {
		return {
			isPlaying: false,
			videoPath: '',
			videoContext: null // 视频上下文对象
		};
	},
	mounted() {
		// 初始化视频路径
		this.videoPath = this.videoUrl;
		// 下载视频（如果需要）
		//this.downLaod(this.msg);
		// 初始化视频上下文（视频标签已渲染）
		//this.initVideoContext();
	},
	methods: {
		toplay() {
			console.log('888888888888');
			const format = encodeURIComponent(JSON.stringify(this.msg));

			uni.navigateTo({
				url: `/pages/videoPlay/videoPlay?msg=${format}`
			});
		},
		// 初始化视频上下文（在mounted后执行，确保标签已存在）
		initVideoContext() {
			this.$nextTick(() => {
				this.videoContext = uni.createVideoContext(`video-${this._uid}`, this);
			});
		},

		// 触发播放（修复事件绑定问题）
		triggerPlay() {
			if (this.videoContext) {
				this.videoContext.play();
			}
		},

		// 视频播放时触发
		onPlay() {
			this.isPlaying = true;
		},

		// 视频暂停时触发
		onPause() {
			this.isPlaying = false;
		},

		// 视频结束时重置
		handleVideoEnd() {
			if (this.videoContext) {
				this.videoContext.stop(); // 停止播放
				this.videoContext.seek(0); // 重置到开头
			}
			this.isPlaying = false;
		},

		// 下载视频（如果需要）
		async downLaod(msg) {
			try {
				const videos = await playVideo(msg);
				this.videoPath = videos.videoPath; // 更新视频路径
			} catch (error) {
				console.error('视频下载失败：', error);
			}
		},

		// 格式化时长（如将秒转为 "01:23" 格式）
		formatDuration(seconds) {
			if (!seconds) return '00:00';
			const min = Math.floor(seconds / 60)
				.toString()
				.padStart(2, '0');
			const sec = (seconds % 60).toString().padStart(2, '0');
			return `${min}:${sec}`;
		}
	}
};
</script>

<style scoped>
.video-message {
	padding: 10rpx 0;
}

/* 视频容器：固定宽度，确保占满父容器 */
.video-container {
	position: relative;
	width: 500rpx; /* 关键：占满父容器宽度 */
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #000;
	/* 用padding-top实现16:9比例（兼容所有设备） */
	padding-top: 56.25%; /* 16:9 = 9/16 = 56.25% */
}

/* 视频样式：绝对定位，覆盖容器 */
.message-video {
	position: absolute; /* 关键：覆盖padding-top的空间 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 视频未播放时的覆盖层 */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* 标题靠下 */
	align-items: center; /* 播放按钮居中 */
}

/* 视频信息（标题和时长） */
.video-info {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
}

.video-title {
	color: #fff;
	font-size: 28rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
	max-width: 80%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.video-duration {
	color: #fff;
	font-size: 24rpx;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 4rpx 10rpx;
	border-radius: 12rpx;
}

/* 播放按钮（增强点击体验） */
.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 绝对居中 */
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.play-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	
}

.icon-play {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	
}
.play-btn-img{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

/* 视频描述样式 */
.image-desc {
	margin: 10rpx 20rpx;
}

.image-text {
	font-size: 32rpx;
	/* 修复：宽度过窄导致换行异常，改为max-width */
	max-width: calc(100% - 40rpx); /* 减去左右margin */
	line-height: 1.5; /* 优化行高，提升可读性 */
}
</style>
